<template>
  <div ref="chartRef" class="chart-container"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)

onMounted(() => {
  const myChart = echarts.init(chartRef.value)

  const option = {
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['美云销', '工程', '电商下沉', 'KA&TOP'],
      top: 0,
      icon: 'rect', // 设置正方形图例
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 40,
      textStyle: {
        fontSize: 12,
        lineHeight: 12, // 设置行高与图标高度一致
        color: '#4E5969' // 统一图例文字颜色
      }
    },
    grid: {
      left: '3%',
      right: '10%', // 增加右侧留白
      bottom: '8%', // 增加底部留白
      containLabel: true
    },
    xAxis: {
      type: 'value',
      name: '达成规模',
      nameLocation: 'center', // 标签居中
      nameGap: 30, // 调整标签与轴线距离
      axisLabel: {
        formatter: '{value}'
      }
    },
    yAxis: {
      type: 'category',
      data: ['订单', '提货', '安装'],
      axisLine: {
        show: true
      },
      axisTick: {
        show: true
      }
    },
    series: [
      {
        name: '美云销',
        type: 'bar',
        stack: 'total',
        label: {
          show: true,
          position: 'inside', // 也可以根据视觉效果选择 'insideRight'
          color: '#1D2129', // 与柱状图颜色一致
          formatter: function (params) {
            return params.data.percent + '%'
          }
        },
        data: [
          { value: 27.97, percent: 34 },
          { value: 23.93, percent: 28 },
          { value: 33.72, percent: 28 }
        ],
        itemStyle: {
          color: '#1088FF'
        }
      },
      {
        name: '工程',
        type: 'bar',
        stack: 'total',
        label: {
          show: true,
          position: 'inside', // 也可以根据视觉效果选择 'insideRight'
          color: '#1D2129', // 与柱状图颜色一致
          formatter: function (params) {
            return params.data.percent + '%'
          }
        },
        data: [
          { value: 27.97, percent: 39 },
          { value: 23.93, percent: 47 },
          { value: 33.72, percent: 47 }
        ],
        itemStyle: {
          color: '#29CF93'
        }
      },
      {
        name: '电商下沉',
        type: 'bar',
        stack: 'total',
        label: {
          show: true,
          position: 'inside', // 也可以根据视觉效果选择 'insideRight'
          color: '#1D2129', // 与柱状图颜色一致
          formatter: function (params) {
            return params.data.percent + '%'
          }
        },
        data: [
          { value: 27.97, percent: 16 },
          { value: 23.93, percent: 16 },
          { value: 33.72, percent: 16 }
        ],
        itemStyle: {
          color: '#859BBB'
        }
      },
      {
        name: 'KA&TOP',
        type: 'bar',
        stack: 'total',
        label: {
          show: true,
          position: 'inside', // 也可以根据视觉效果选择 'insideRight'
          color: '#1D2129', // 与柱状图颜色一致
          formatter: function (params) {
            return params.data.percent + '%'
          }
        },
        data: [
          { value: 27.97, percent: 11 },
          { value: 23.93, percent: 11 },
          { value: 33.72, percent: 9 }
        ],
        itemStyle: {
          color: '#FFB928'
        }
      }
    ],
    graphic: [
      {
        type: 'text',
        left: '83%', // 使用百分比定位，靠近柱状图末尾
        top: 100,
        style: {
          text: '27.97亿',
          fill: '#1D2129', // 金额显示黑色
          fontSize: 12
        }
      },
      {
        type: 'text',
        left: '88%', // 百分比符号右移
        top: 100,
        style: {
          text: '▼ 15.1%',
          fill: '#EE6666', // 变化率显示红色
          fontSize: 12
        }
      },
      {
        type: 'text',
        left: '83%',
        top: 190,
        style: {
          text: '23.93亿',
          fill: '#1D2129',
          fontSize: 12
        }
      },
      {
        type: 'text',
        left: '88%',
        top: 190,
        style: {
          text: '▼ 10.5%',
          fill: '#EE6666',
          fontSize: 12
        }
      },
      {
        type: 'text',
        left: '83%',
        top: 280,
        style: {
          text: '33.72亿',
          fill: '#1D2129',
          fontSize: 12
        }
      },
      {
        type: 'text',
        left: '88%',
        top: 280,
        style: {
          text: '▲ 4.4%',
          fill: '#91CC75',
          fontSize: 12
        }
      }
    ]
  }

  myChart.setOption(option)

  window.addEventListener('resize', function () {
    myChart.resize()
  })
})
</script>
<style lang="scss" scoped>
.chart-container {
  width: 920px;
  height: 438px;
  margin: 0 auto;
}
</style>
